<template>
  <div id="login">
    <div class="login-div flex j-b a-c">
      <!-- <img src="../assets/logo.gif" /> -->
      <div class="login-form flex f-d a-c j-e">
        <div class="form-title flex a-c"><img src="../assets/img/login-logo-s.png" alt=""><span>Tang-后台管理系统</span></div>
        <el-form :model="ruleForm" ref="ruleForm" :rules="ruleFormRules" status-icon label-width="80px" class="demo-ruleForm">
          <el-form-item label="账号" prop="username">
            <el-input v-model="ruleForm.username" autocomplete="off" placeholder="用户名" maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="ruleForm.password" type="password" autocomplete="off" placeholder="密码"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="verifyCode" style="margin-top:30px">
            <div class="flex">
              <el-input v-model="ruleForm.verifyCode" autocomplete="off" placeholder="验证码" maxlength="4" />
              <validate-code ref="ref_validateCode" @change="changeCode" />
            </div>
          </el-form-item>
          <el-checkbox v-model="ruleForm.checkMe">记住密码</el-checkbox>
          <el-form-item>
            <el-button type="danger" @click="submitForm('ruleForm')" style="width:140px">登录</el-button>
            <el-button @click="resetForm('ruleForm')" style="width:140px">取消</el-button>
          </el-form-item>
        </el-form>

        <div class="foot">中国通信服务股份有限公司版权所有</div>
        <div class="foot">京ICP备07005959号-2--京公网安备 11010602103657号</div>
      </div>
    </div>
  </div>
</template>
<script>
import validateCode from '../components/ValidateCode.vue'
import md5 from 'js-md5'
// import sha3 from 'js-sha3';
export default {
  components: {
    validateCode
  },
  data() {
    var validateVerifyCode = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入验证码'))
      } else if (value.toUpperCase() != this.checkCode) {
        callback(new Error('验证码输入错误'))
      } else {
        callback()
      }
    }
    return {
      time:'',
      ruleForm: {
        username: '',//姓名
        password: '',//密码
        verifyCode: '',//验证码
        checkMe: false,//是否记住,
        checkCode: ''
      },
      //校验
      ruleFormRules: {
        username: [{ required: true, message: '请输入您的用户名,长度为(4-10)', trigger: 'blur' },
        { pattern: /^[a-zA-Z0-9_-]{4,10}$/, message: '请输入正确用户名,不能带特殊符号' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*-+.?]).*$/, message: '最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符' }],
        verifyCode: [{ validator: validateVerifyCode, trigger: 'blur' }]
      }
    }
  },
  mounted() {
      //  if(this.time) clearInterval(time)
  },
  methods: {
    changeCode(value) {
      // console.log(value);
      this.checkCode = value;
    },
  //  beforeDestroy(){
  //   clearInterval(this.time);
  //   this.timer = null;
  //  },
    // 登录方法
    async submitForm(formName) {
      this.$refs[formName].validate(async valid => {
        // 判断是否表单数据是否验证成功
        if (valid) {
          var loginFrom = {
            username: this.ruleForm.username,
            password: this.ruleForm.password
          }
          let {
            data
          } = await this.$http.post('/login', loginFrom)
          let list=data.data
          localStorage.setItem('identity', list.identity)
          localStorage.setItem('loginUsername', list.username)
          localStorage.setItem('token',list.token)
          let identity = await this.$http.post('/dtroute', {
            identity: localStorage.getItem('identity')
          })
        
          let routeList = identity.data.data
          this.$store.commit('route/setadminRoute', routeList)
          // location. reload()
        //  this.time= setInterval(()=>{
        //     this.$router.replace({
        //     path:'/areaDetail'
        //   })
        //   },1000)
         
            this.$router.push('/areaDetail')
        
          // if (routeList) {
            
          // }

          // console.log(identity);
          // 判断是否登录成功
          // 判断是否需要记住密码
          if (this.ruleForm.checkMe) {
            // console.log();
            // console.log(sha3.shake_256(md5(this.ruleForm.password)));
            // 保存密码
            localStorage.setItem('loginPwd', md5(this.ruleForm.password))
          }
          // 跳转到后台管理页面

          this.$message({
            message: '登录成功',
            type: 'success'
          });
        } else {
          // this.$message.error('有信息未输入');
        }
      })
    },
    // 重置办法
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style  lang="scss">
#login {
  width: 100%;
  height: 100%;
  background: url("../assets/img/login-bg-new.png") no-repeat;
  background-size: cover;
  position: relative;

  .login-div {
    .el-form-item__label {
      color: red;
    }
    .el-form-item__label:before {
      color: red;
    }
    .el-form-item__error {
      color: rgb(222, 21, 21);
    }
    .el-form-item:last-child .el-button:last-child {
      margin-left: 20px;
    }
    .foot {
      color: #ccc;
      font-size: 14px;
      margin-top: 20px;
    }
    .form-title {
      margin-bottom: 40px;
      color: #eee;
      span {
        padding-left: 20px;
      }
    }
    width: 400px;
    height: 360px;
    border-radius: 8px;
    // border: 1px solid red;
    // background-color: #e1e1e1;
    position: absolute;
    top: 180px;
    right: 20px;
    .login-form {
      width: 100%;
      // height: 100%;
      .yzimg {
        flex: 1;
        height: 40px;
        border-radius: 4px;
      }
      .el-checkbox {
        color: #eee;
        // border: solid;
        margin-left: 80px;
        //  text-align: right;
        margin-bottom: 20px;
        //  width: 150px;
      }
    }
  }
}
</style>